<script setup>
import { MoreInfoData } from "../store/page.js";
import SearchMoreInfo from "../components/SearchMoreInfo.vue";
import { ref, onMounted, computed } from "vue";
import { ArrowLeft } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

/**
 * @typedef {
 *   {
 *     ip: string
 *     ports: number[]
 *     vul: string[]
 *   }
 * } IpSacnData
 *
 * @typedef {
 *   {
 *     searchIp: string
 *     date: string
 *     ipScan: IpSacnData[]
 *   }
 * } VulInfoData
 *
 * */

const router = useRouter();

/**@type {import('vue').Ref<VulInfoData>}*/
const data = ref({ipScan: [], date: "", searchIp: ""});
const portTotalNum = computed(() => {
  let num = 0
  data.value.ipScan.forEach(value => {
    num += value.ports.length
  })
  return num
})

const vulTotalNum = computed(() => {
  let num = 0
  data.value.ipScan.forEach(value => {
    num += value.vul.length
  })
  return num
})

onMounted(() => {
  data.value = MoreInfoData.data;
});

function toBack() {
  router.back();
}
</script>

<template>
  <div class="more-info-page-root">
    <div class="more-info-page-header">
      <div @click="toBack" class="more-info-back">
        <el-button  plain>
          <el-icon><ArrowLeft /></el-icon>
          <span class="back-text">返回</span>
        </el-button>
      </div>

      <div class="scan-info-header">
        <img src="../assets/images/globl.png" style="max-height: 100%" />
        <div>IP: {{ data.searchIp }}</div>
      </div>

      <div class="more-info-text">{{`端口总数${portTotalNum}个` }}</div>
      <div class="more-info-text">{{`漏洞总数${vulTotalNum}个`}}</div>
    </div>

    <div class="more-info-page-content">
      <div
        style="
          width: 100%;
          height: 90%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 5%;
          overflow: hidden;
        "
      >
        <ul
          class="infinite-list"
          style="overflow: auto; width: 95%; height: 100%"
        >
          <div style="margin-top: 20px" v-for="v in data.ipScan">
            <SearchMoreInfo :ip="v.ip" :vul="v.vul" :ports="v.ports">
            </SearchMoreInfo>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.scan-info-header {
  display: flex;
  align-items: center;
  font-size: 20px;
}

.more-info-page-root {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 10% 90%;
}
.more-info-page-header {
  width: 100%;
  height: 100%;
  background-color: #f6f5fb;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px;
  display: grid;
  grid-template-columns: 15% 30% 20% 35%;
}
.more-info-page-content {
  width: 100%;
  height: 100%;
  background-color: #dfe1ee;
}
.back-text {
  font-size: 15px;
}
.more-info-text {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.more-info-back {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
  font-size: calc(140%);
  width: 100%;
  height: 100%;
}
</style>